<template>
	<view>
		<nav-bar-sub></nav-bar-sub>
		<view class="subTitle">
			考试信息
		</view>
		<view class="examContent">
			<view>考试名称：<text>{{examItem.name}}</text> </view>
			<view>考试总分：<text>{{examItem.maxScore}}</text>分</view>
			<view v-if="examItem.examTime>0">考试时长：<text>{{examItem.examTime}}</text>分钟</view>
			<view v-else>考试时长：<text>不限时长</text></view>
		</view>
		<view class="subTitle">考试须知</view>
		<view class="tipsArea">
			<ul>
				<li>1、严格遵守考场纪律。</li>
				<li>2、请勿违反考试规则，以下操作按作弊处理。</li>
				<li>（1）请勿将鼠标移出考试页面。</li>
				<li>（2）请勿使用Alt + Tab、 Alt + F4、 Win等功能键。</li>
				<li>3、答题时要注意“剩余时间”提示，当剩余时间为0时，系统将自动交卷。</li>
				<li>4、答题完成后，点击“我要交卷”按钮进行交卷，否则考试无效。</li>
				<li>5、如果你准备好了，就点击“进入考场”吧，预祝取得好的成绩。</li>
			</ul>
		</view>
		<view class="btnArea">
			<!-- checkFace==1 不需要人脸识别，checkFace==2 需要人脸识别 -->
			<u-button v-if="needCheckFace==2 && !passFace " class="btnClass" type="primary" :ripple="true"
				shape="circle" @click="checkFace">开始人脸识别</u-button>
			<u-button v-if="needCheckFace==1 || passFace" class="btnClass" type="success" :ripple="true" shape="circle"
				@click="enterExam">进入考试</u-button>
			<u-button class="btnClass" type="error" :ripple="true" shape="circle" @click="exitExam">退出考试</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				examItem: {},
				examNotes: "",
				examNote: `
				1、严格遵守考场纪律。
                2、请勿违反考试规则，以下操作按作弊处理。
				（1）请勿将鼠标移出考试页面。
				（2）请勿使用Alt + Tab、 Alt + F4、 Win等功能键。
				3、答题时要注意“剩余时间”提示，当剩余时间为0时，系统将自动交卷。
				4、答题完成后，点击“我要交卷”按钮进行交卷，否则考试无效。
				5、如果你准备好了，就点击“进入考场”吧，预祝取得好的成绩。`,
				passFace: false,

			}
		},
		methods: {
			enterExam() {
				// this.$u.route 的参数在下一个页面中的onLoad中接受
				this.$u.route('/pages/exam/examTestPage', {
					id: this.examItem.id,
				})
			},
			exitExam() {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				})
			},
			checkFace() {
				var that = this
				this.$api.uploadImg2('face')
					.then(res => {
						console.log('faceRes', res)
						if (res.data.indexOf('操作成功') >= 0) {
							this.passFace = true
						}
					})
			},
		},
		computed: {
			needCheckFace: function() {
				// checkFace==1 不需要人脸识别，checkFace==2 需要人脸识别
				// H5 平台不需要检测人脸
				// #ifdef  H5 
				return 1
				// #endif

				// #ifdef APP-PLUS || MP-WEIXIN
				return this.examItem.checkFace
				// #endif
			}
		},
		onLoad(options) {
			// 页面跳转 传递对象 传对象
			this.examItem = JSON.parse(options.examItemObj)
			this.examNotes = this.examItem.examNotes
			console.log("考试信息：", this.examItem);

		}
	}
</script>

<style lang="scss">
	page {
		font-size: 31rpx;

		ul li {
			list-style: none;
		}
	}

	.tipsArea {
		padding: 0 40rpx;
		margin-left: -30rpx;
	}

	.subTitle {
		font-size: $uni-font-size-title;
		font-weight: bold;
		color: $theme-color;
		text-align: center;
		margin: 40rpx auto 20rpx auto;
	}

	.examContent {
		line-height: 50rpx;
		margin-left: 180rpx;

		text {
			font-weight: bold;
			color: #5BA176;
		}
	}

	ol {
		// padding: 80rpx;
		// background-color: #0077AA;
		margin: 0 30rpx;
		line-height: 50rpx;
	}

	.btnArea {
		display: flex;
		margin-top: 50rpx;

		.btnClass {
			width: 300rpx;
		}
	}
</style>
